<template>
	<view class="car">
		<view class="list flex-between" v-for="(item,index) in 3" :key="'ar'+index">
			<view class="iconfont flex-center" :class="{iconduihao2:isCheck}" @click="changeCheck(index)"></view>
			<view class="right flex-between">
				<image src="/static/imgs/menus1.jpg" mode="aspectFill"></image>
				<view class="list-right flex-between">
					<view class="h3">大白菜</view>
					<view class="price-add flex-between">
						<view class="price"><text>￥15</text>/斤</view>
						<count :num.sync="num"></count>
					</view>
				</view>
			</view>

		</view>
		<view class="tuijian">
			<view class="title flex-center">
				<view></view> 
				<text>您可能还需要</text>
				<view></view> 
			</view>
			<view class="good-card flex-between">
				<navigator url="/pages/index/goodDetail" hover-class="none" class="card-item" v-for="(item,index) in 10" :key="'a5'+index">
					<image src="/static/imgs/menus1.jpg" mode="aspectFill"></image>
					<view class="card-bottom">
						<view class="title">蔬菜名字蔬菜名字</view>
						<view class="flex-between">
							<view class="price">￥15.5<text>/斤</text></view>
							<view class="iconfont iconAddwithcircleF"></view>
						</view>
					</view>
				</navigator>
			</view>
		</view>
		
		<view class="car-footer flex">
			<!-- 删除 -->
			<view class="del flex-between" v-if="isDel">
				<view class="left flex">
					<view class="iconfont flex-center" :class="{iconduihao2:isCheck}" @click="changeCheck(index)"></view>
					全选
				</view>
				<view class="right">
					<view class="btn flex-center">删除</view>
				</view>
			</view>
			<!-- 购买 -->
			<view class="buy flex-between" v-else>
				<view class="left flex">
					<view class="iconfont flex-center" :class="{iconduihao2:isCheck}" @click="changeCheck(index)"></view>
					全选
				</view>
				<view class="right flex">
					<view class="money">
						<view class="top flex">
							合计：<text>￥</text>
							<view>600.00</view>
						</view>
						<view class="bottom">
							不含运费
						</view>
					</view>
					<view class="btn flex-center" @click="goConfirmOrder">
						去结算
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import Count from '@/components/count.vue'
	export default {
		components: {
			Count
		},
		data() {
			return {
				num: 1,
				isCheck: true,
				isDel: false,
			}
		},
		methods: {
			changeCheck(index) {
				this.isCheck = !this.isCheck
			},
			// 去结算
			goConfirmOrder(){
				uni.navigateTo({
					url:'/pages/index/confirmOrder'
				})
			}
		},
		onNavigationBarButtonTap(e) {
			this.isDel = !this.isDel;
			console.log(this.isDel)
			let currentWebview = this.$mp.page.$getAppWebview();;
			let titleObj = currentWebview.getStyle().titleNView;  
			     console.log(this.isDel)
			titleObj.buttons[0].text = this.isDel ? "完成" :'编辑';
			         //设置回去  
			currentWebview.setStyle({    
				titleNView: titleObj  
			});      
		}
	}
</script>

<style lang="less">
	@main-color:#039702;
	.header-right{
		position: fixed;
		right:30rpx;
		top:-30rpx;
		z-index: 9999;
		font-size: 34rpx;
	}
	.tuijian{
		margin-top: 30rpx;
		.title{
			font-size: 32rpx;
			height: 60rpx;
			view{
				width: 60rpx;
				height: 2rpx;
				background: @main-color;
			}
			text{
				font-weight: bold;
				margin: 0 20rpx;
			}
		}	
		.good-card{
			flex-wrap: wrap;
			width: calc(100% - 40rpx);
			margin: 10rpx auto;
			.card-item{
				width: 348rpx;
				background: white;
				border-radius: 10rpx;
				text-align: center;
				margin-bottom: 15rpx;
				overflow: hidden;
				image{
					width: 348rpx;
					height: 348rpx;
				}
				.card-bottom{
					padding: 10rpx 15rpx 20rpx;
					.title{
						font-size: 30rpx;
						color:#222;
						overflow:hidden;
						text-overflow:ellipsis;
						white-space:nowrap;
						margin-bottom: 10rpx;
						text-align: left;
						font-weight: bold;
					}
					.price{
						font-size: 32rpx;
						color:#f00;
						font-weight: bold;
						text{
							font-size: 24rpx;
							color:#666;
							font-weight: normal;
						}
					}
					.iconfont{
						font-size: 45rpx;
						color:#039702
					}
				}
			}
		}
	}
	.car{
		padding-bottom: 150rpx;
	}
	.list {
		padding: 20rpx 30rpx;
		background: white;

		.iconfont {
			color: @main-color;
			width: 32rpx;
			height: 32rpx;
			border-radius: 50%;
			box-sizing: border-box;
			border: 2rpx solid #999;

		}

		.iconduihao2 {
			font-size: 36rpx;
			color: @main-color;
		}

		.right {
			width: 630rpx;

			image {
				width: 150rpx;
				height: 150rpx;
				border-radius: 20rpx;
			}

			.list-right {
				width: 460rpx;
				flex-direction: column;
				align-items: flex-start;
				height: 150rpx;

				.h3 {
					font-size: 32rpx;
					font-weight: bold;
				}

				.price-add {
					width: 100%;
				}

				.price {
					font-size: 28rpx;
					color: #666;

					text {
						font-size: 34rpx;
						color: red;
						font-weight: bold;
					}
				}

			}
		}

	}

	.car-footer {
		position: fixed;
		width: 100vw;
		height: 90rpx;
		bottom: 0px;
		background: white;
		padding: 0 30rpx;
		box-sizing: border-box;
		box-shadow: 0 5rpx 5rpx 5rpx #ddd;
		&>view{
			width: 100%;
		}
		.left {
			font-size: 30rpx;

			.iconfont {
				color: @main-color;
				width: 32rpx;
				height: 33rpx;
				border-radius: 50%;
				box-sizing: border-box;
				border: 2rpx solid #999;
				margin-right: 10rpx;

			}

			.iconduihao2 {
				font-size: 36rpx;
				color: #039702;
			}
		}

		.right {
			.money {
				.top {
					font-size: 28rpx;
					font-weight: bold;

					text {
						font-size: 24rpx;
						font-weight: bold;
						color: red;
					}

					view {
						color: red;
					}
				}

				.bottom {
					font-size: 22rpx;
					color: #999;
					text-align: right;
				}
			}

			.btn {
				width: 160rpx;
				background: @main-color;
				height: 60rpx;
				font-size: 30rpx;
				color: white;
				border-radius: 30rpx;
				margin-left: 20rpx;
			}
		}
	}
</style>
